<script>
import { showToast } from "@/utils"
import request from "@/utils/request"
import closeIcon from "../assets/close_white.svg"

export default {
  name: "userScore",
  data() {
    return {
      score: 0,
      closeIcon,
      showTipPopup: false,
    }
  },
  props: {
    scoreProp: Number,
    maxScore: Number,
    userDoTopicId: String,
		showTipPopupProp: {
			type: Boolean,
			default: true,
		},
  },
  watch: {
    scoreProp: {
      handler(val) {
        this.score = val
        if (!val) {
          console.log("enableAlertBeforeUnload")
          // 监听页面返回，弹窗提示用户评分
          wx.enableAlertBeforeUnload({
            message: "你还没有评分，确定要离开吗？",
          })
					this.showTipPopup = true
        } else {
          console.log("disableAlertBeforeUnload")
          wx.disableAlertBeforeUnload()
					this.showTipPopup = false
        }
      },
      immediate: true,
    },
  },
  methods: {
    open() {
      this.$refs.popup.open()
    },
    confirm() {
      // 检查输入的分数是否合法
      const score = Number.parseFloat(this.score)
      if (isNaN(score) || score < 0 || score > this.maxScore) {
        showToast.default(`请输入0-${this.maxScore}之间的数字`)
        return
      }
      uni.showLoading({ title: "评分中" })
      request({
        url: "userDoTopic/selfTopicScore",
        data: {
          userDoTopicId: this.userDoTopicId,
          userScore: this.score,
        },
        errorHandle: true,
      })
        .then(() => {
          uni.hideLoading()
          this.$emit("submit", this.score)
          showToast.default("评分成功")
          this.$refs.popup.close()
        })
        .catch(() => {
          uni.hideLoading()
        })
    },
  },
  emits: ["submit"],
}
</script>

<template>
  <view class="component">
    <view class="slot" @click="open">
      <!--			提示浮窗-->
      <view class="tip-popup" v-if="showTipPopup && showTipPopupProp" @click.stop="() => {}">
        <view class="content">
          <text>可点击此处自评分</text>
          <image class="icon" :src="closeIcon" @click.stop="() => (showTipPopup = false)"></image>
        </view>
      </view>
      <slot></slot>
    </view>
    <uni-popup type="bottom" ref="popup">
      <view class="popup-content">
        <view class="header">
          <view class="user-score">
            <text style="font-weight: bold">你的自评分：</text>
            <view style="border: 2rpx solid var(--border-color); padding: 10rpx 20rpx">
              <input v-model="score" style="width: 100rpx; text-align: center" />
            </view>
            <text style="margin-left: 10px">分</text>
          </view>
          <view class="confirm-btn" @click="confirm">确定</view>
        </view>
        <view class="process-bar">
          <slider
            :max="maxScore"
            :value="score"
            activeColor="#2CB986"
            backgroundColor="#E8E8E8"
            :step="0.1"
            @changing="(event) => (score = event.detail.value.toFixed(1))"
          ></slider>
          <view style="text-align: right; font-size: 26rpx; color: var(--text-color-light); margin-top: 10rpx; font-style: italic"
            >最大可设置{{ maxScore }}分</view
          >
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<style scoped lang="scss">
.component {
  height: 100%;
  width: 100%;
  .slot {
    height: 100%;
    width: 100%;
    position: relative;
    > .tip-popup {
      position: absolute;
      bottom: calc(100% + 20rpx);
      right: calc(50% - 80rpx);
      width: max-content;
      > .content {
        background: var(--theme-color);
        color: white;
        font-size: 28rpx;
        display: flex;
        align-items: center;
        padding: 20rpx;
        border-radius: 30rpx;
        box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
        position: relative;
        &::after {
          content: "";
          position: absolute;
          bottom: -20rpx;
          right: 67.5rpx;
          border-top: 20rpx solid var(--theme-color);
          border-right: 15rpx solid transparent;
          border-left: 15rpx solid transparent;
        }
        > .icon {
          width: 30rpx;
          height: 30rpx;
          margin-left: 20rpx;
        }
      }
    }
  }
}
.popup-content {
  background: white;
  border-radius: 40rpx 40rpx 0 0;
  padding: 40rpx;
  > .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-color);
    > .user-score {
      font-size: 34rpx;
      display: flex;
      align-items: center;
    }
    > .confirm-btn {
      border: 2rpx solid #2cb986;
      padding: 10rpx 40rpx;
      font-size: 28rpx;
      color: #2cb986;
      border-radius: 31rpx;
    }
  }
  > .process-bar {
    margin-top: 40rpx;
  }
}
</style>
